<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<html lang="en">
<head>
<meta charset="utf-8" />
<head>
<base href="<%=basePath%>">

<title>UserGroup</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<!-- basic styles -->
<link href="<%=basePath %>admin/assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/font-awesome.min.css" />

<link rel="stylesheet" href="<%=basePath %>admin/assets/css/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/jquery.gritter.css" />

<!--[if IE 7]>
      <link rel="stylesheet" href="<%=basePath %>admin/assets/css/font-awesome-ie7.min.css" />
    <![endif]-->
<!-- page specific plugin styles -->
<!-- fonts -->
<!-- ace styles -->

<link rel="stylesheet" href="<%=basePath %>admin/assets/css/ace.min.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/messenger.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/messenger-theme-future.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/demo.css" />
<link rel="stylesheet" href="<%=basePath %>admin/assets/css/zTreeStyle.css" />

<!--[if lte IE 8]>
      <link rel="stylesheet" href="<%=basePath %>admin/assets/css/ace-ie.min.css" />
    <![endif]-->
<!-- inline styles related to this page -->
<!-- ace settings handler -->

<script src="<%=basePath %>admin/assets/js/ace-extra.min.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="<%=basePath %>admin/assets/js/html5shiv.js"></script>
    <script src="<%=basePath %>admin/assets/js/respond.min.js"></script>
    <![endif]-->
<link href="<%=basePath %>admin/assets/css/backOffice/backOffice.css" rel="stylesheet" />
<style type="text/css">
/* 选择图标样式的时候的样式 */
.onClick1 {
	border: solid 1px;
}

.onIcon {
	color: red;
}
</style>
</head>

<body>
	<div id="bgdiv" style="position:absolute; z-index:1000; background-color:white;width:100%;height:100%;"></div>

	<div class="page-content">
		<div class="page-header">
			<h1 style="text-align:left;margin: -6px 0px -18px -2px;color: rgb(131, 105, 105);font-family: 微软雅黑;line-height:34px;">用户组管理</h1>
		</div>
		<div class="row">
			<div class="col-xs-12">
				<div class="table-responsive">
					<button class='btn btn-primary btn-sm' id='butadd'>
						<i class='icon-plus-sign bigger-110'></i> <span class='bigger-110 no-text-shadow'>新增用户组</span>
					</button>
					<button class='btn btn-danger btn-sm' style='margin-left: 4px' id='butdel'>
						<i class='icon-trash bigger-110'></i> <span class='bigger-110 no-text-shadow'>删除用户组</span>
					</button>
					<button class='btn btn-success btn-sm' style='margin-left: 4px' id='buflush'>
						<i class='icon-refresh bigger-110'></i> <span class='bigger-110 no-text-shadow'>刷新列表</span>
					</button>
					<table id="sample-table-2" class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th class="center"><label> <input type="checkbox" class="ace" /> <span class="lbl"></span>
								</label></th>
								<th align="center">用户组编号</th>
								<th align="center">用户组名</th>
								<th align="center">描述</th>
								<th align="center">当前用户组人数</th>
								<th align="center"><i class=" icon-cogs"></i> 操作</th>
							</tr>
						</thead>

						<tbody>
							<c:forEach items="${userGroupList }" var="userGroup">
								<tr>
									<td class="center"><label> <input type="checkbox" class="ace" /> <span class="lbl"></span>
									</label></td>
									<td align="center">${userGroup.groupID }</td>
									<td align="center">${userGroup.name }</td>
									<td align="center">${userGroup.description }</td>
									<td align="center" style="word-wrap: break-word; word-break: break-all;">
									${userGroup.users.size() }人
									<span class="help-button cuitooltip" data-rel="popover" data-trigger="hover" data-placement="left" data-content="More details." title="" 
									data-original-title='${userGroup.userNames }'  style="
									    width: 15px;
									    height: 25px;
									    margin: -4px 0 0 0;
									">?</span></td>
									<td align="center">
										<div class="btn-group ">
											<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle btn-xs">
												操作 <span class="icon-caret-down icon-on-right"></span>
											</button>

											<ul class="dropdown-menu dropdown-info pull-right" style="min-width:77px;">
												<li style="list-style:none;"><a class="modify11" style="text-decoration:none">修改</a></li>

												<li style="list-style:none;"><a class=" seperate11" style="text-decoration:none">分配权限</a></li>


											</ul>

										</div> <!-- /btn-group -->
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<!--Begin Modole-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">用户组管理</h4>
					</div>
					<div class="modal-body">
						<!--添加模态窗口内容-->
						<div class="row">
							<div class="col-sm-3">
								<label for="form-field-select-1">用户组名称</label>
							</div>
							<div class="col-sm-7">
								<input type="text" id="userGroupName" name="userGroup.name" placeholder="用户组名称（例：系统管理员）" class="form-control">
							</div>
						</div>

						<div class="row" style="margin-top:19px">
							<div class="col-sm-3">
								<label for="form-field-select-1">描述</label>
							</div>
							<div class="col-sm-7">
								<input type="text" id="Remark" placeholder="描述" name="userGroup.description"
									class="form-control">
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<input type="hidden" id="idHidden" />
						<button type="button" class="btn btn-default" data-dismiss="modal" id="but_infoclose">关闭</button>
						<button type="button" class="btn btn-primary" id="but_saveadd">保存</button>
						<button type="button" class="btn btn-primary" style="display:none" id="but_savemodify">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!--End Modole-->
		<!--Begin TreeModole-->
		<div class="modal fade" id="myTreeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">权限分配</h4>
					</div>
					<div class="modal-body">
						<!--添加模态窗口内容-->
						<ul id="treeDemo" class="ztree" style="height: 353px; overflow-x: auto; overflow-y: auto; border:0px;margin-top:0px;background-color:white;width:100%"></ul>

					</div>
					<div class="modal-footer">
						<input type="hidden" id="idTreeHidden" />
						<button type="button" class="btn btn-default" data-dismiss="modal" id="but_infoclose">关闭</button>
						<button type="button" class="btn btn-primary" id="but_savetree">保存</button>
					</div>
				</div>
			</div>
		</div>
		<!--End TreeModole-->

	</div>


	<!-- basic scripts -->
	<!--[if !IE]> -->
	<!--<script src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>-->
	<!-- <![endif]-->
	<!--[if IE]>
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <![endif]-->
	<!--[if !IE]> -->

	<script type="text/javascript">
	window.jQuery
		|| document
			.write("<script src='<%=basePath %>admin/assets/js/jquery-2.0.3.min.js'>"
				+ "<" + "script>");
    </script>

	<!-- <![endif]-->
	<!--[if IE]>
    <script type="text/javascript">
     window.jQuery || document.write("<script src='<%=basePath %>admin/assets/js/jquery-1.10.2.min.js'>"+"<"+"script>");
    </script>
    <![endif]-->

	<script type="text/javascript">
	if ("ontouchend" in document)
	    document
		    .write("<script src='<%=basePath %>admin/assets/js/jquery.mobile.custom.min.js'>"
			    + "<" + "script>");
    </script>
	<script src="<%=basePath %>admin/assets/js/bootstrap.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/typeahead-bs2.min.js"></script>

	<!-- page specific plugin scripts -->
	<!--[if lte IE 8]>
      <script src="<%=basePath %>admin/assets/js/excanvas.min.js"></script>
    <![endif]-->

	<script src="<%=basePath %>admin/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.slimscroll.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/bootbox.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.easy-pie-chart.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.sparkline.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/flot/jquery.flot.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/flot/jquery.flot.pie.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/flot/jquery.flot.resize.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.gritter.min.js"></script>
	<!-- ace scripts -->

	<script src="<%=basePath %>admin/assets/js/ace-elements.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/ace.min.js"></script>

	<script src="<%=basePath %>admin/assets/js/jquery.dataTables.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.dataTables.bootstrap.js"></script>
	<!-- inline scripts related to this page -->
	<script src="<%=basePath %>admin/assets/js/messenger.js"></script>
	<script src="<%=basePath %>admin/assets/js/messenger.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>admin/base/userGroup/js/js_UserGroup.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.ztree.core-3.5.min.js"></script>
	<script src="<%=basePath %>admin/assets/js/jquery.ztree.excheck-3.5.min.js"></script>
	<script type="text/javascript">
	$(function() {
	    $(".cuitooltip").tooltip({
		animation : true,
		trigger : 'hover'
	    });
	});
    </script>
</body>
</html>
